 {layout name="common/layout" /}
<style>
	[v-cloak] {
		display: none;
	}

	.tabBar>span {
		position: relative;
	}

	.tabBar>span>a {
		display: inline-block;
		height: 100%;
		width: 100%;
		text-align: center;
		line-height: 40px;
	}
</style>
<link rel="stylesheet" type="text/css" href="__MERCHANT_STATIC__/style/css/index/index.css" />
<div class="Hui-article-box" style="margin-top: 37px;">
	<h2 class="index_main_commonTitle">账单管理</h2>
	<div v-cloak class="Hui-article" id="vue-contaniner" style="top:0px">
		<div class="cl" style="margin-bottom: 40px;">
			<!-- 头部账户信息综合 -->
			<div class="index_header">
				<div class="article-content">
					<div class="article-l">
						<div class="account">
							<span>账户余额：</span>
							<span style="margin-left: 30px;color:#f80000;font-size:24px;margin-right:15px;">￥{$data['merchant_list']['merchant_coin']|sprintf='%.2f',###}</span>
						</div>
						<div class="cash"><a href="{:url('order/cash')}">提现</a></div>
					</div>
					<div class="article-r">
						<a class="index_getRecord" href="{:url('order/recond')}">查看提现记录</a>
					</div>
				</div>
				<div class="article-content">
					<form action="{:url('order/billdetail')}" style="border:0;margin-left: 0px;" method="get">
						<div class="article-l">

							<span>结算账单：</span>
							<span class="select-box radius mt-20" style="width: 120px;margin-left: 30px;">
								<select class="select currentYear" name="year" size="1" >
									<option value="" selected="">请选择年份</option>
									<option value="2017">2017</option>
									<option value="2018">2018</option>
									<option value="2019">2019</option>
									<option value="2020">2020</option>
									<option value="2021">2021</option>
									<option value="2022">2022</option>
									<option value="2023">2023</option>
									<option value="2024">2024</option>
									<option value="2025">2025</option>
								</select>
							</span>
							<span class="select-box radius mt-20" style="width: 140px;margin-left: 30px;">
								<select class="select currentMonth"  name="may" size="1" >
									<option value="" selected="">请选择月份</option>
									<option value="01">01</option>
									<option value="02">02</option>
									<option value="03">03</option>
									<option value="04">04</option>
									<option value="05">05</option>
									<option value="06">06</option>
									<option value="07">07</option>
									<option value="08">08</option>
									<option value="09">09</option>
									<option value="10">10</option>
									<option value="11">11</option>
									<option value="12">12</option>
								</select>
							</span>
						</div>
						<div class="look cash" style="margin-top: 0px;">
							<button type="submit" id="btn_check">查看
						</button>
						</div>
				</div>
			</div>
			<!-- 交易汇总 -->
			<h2 class="index_main_commonTitle">交易汇总</h2>
			<?php if( !in_array(session('merchant.merchant_id'),config('__MERCHANT_ID__')) ){ ?>
			<!--商品订单-->
			<ul class="index_main_orderList">
				<li v-for="item,index in orderNumber" class="index_main_orderSingle">
					<span>{{orderName[index].name}}:</span>
					<a :href='"/merchant/order/index.html?type="+orderName[index].index'>{{item}}</a>
				</li>
			</ul>
			<?php }else{ ?>
			<!--图书订单-->
			<ul class="index_main_orderList">
				<li v-for="item,index in borrowOrderNumber" class="index_main_orderSingle">
					<span>{{borrowOrderName[index].name}}:</span>
					<a :href='"/merchant/book/borroworder.html?type="+borrowOrderName[index].index'>{{item}}</a>
				</li>
			</ul>
			<?php } ?>
			<?php if( !in_array(session('merchant.merchant_id'),config('__MERCHANT_ID__')) ){ ?>
			<h2 class="index_main_commonTitle">基本设置</h2>
			<!-- 基本设置 -->
			<!-- 基本设置显示有两种1.从未设置过（firstSetting），点击进去设置（dataType=1） 
			2.已经进行过设置（firstSetting=1）
			-->
			<div class="index_main_setting" :class="{'index_main_setting--readonly':dataType==0}"   v-show="(firstSetting==1&&dataType==1) || firstSetting==0">
				<!-- 服务标 -->
				<h3 v-show="dataType==0&&serviceShow || dataType==1" class="index_main_settingTitle">服务标：</h3>
				<ul v-show="dataType==0&&serviceShow || dataType==1" class="index_main_typeList">
					<!-- 由于产品需求更改，服务标只显示免押，免赔，随租随换 -->
					<!-- 显示分两种情况 -->
					<!-- 1.编辑状态只显示 免押金 免赔 随租随换 2.预览状态只有当前item被点击时才显示 -->
					<li :data-msg="item.msg" v-show="((index==0 || index==2 || index==5)&&dataType==1) || (item.click==1&&dataType==0)" v-for="item,index in serviceList" @click="serviceClick(index+1)" :class="{'index_main_typeSingle--click':item.click==1}"
					    class="index_main_typeSingle">{{item.name}}</li>
				</ul>
				<!-- 每笔限租 -->
				<!-- 预览模式下设置过限租才会显示 -->
				<h3 v-show="dataType==0&&data.goods_max_count || dataType==1" class="index_main_settingTitle">每笔限租：</h3>
				<div v-show="dataType==0&&data.goods_max_count || dataType==1" class="index_mian_maxNumber">
					<!-- 每笔限租渲染 -->
					<input type="number" @blur="max(data.goods_max_count)" min="1"  max="50" v-model="data.goods_max_count" class="index_main_maxIput" />
					<span v-show="dataType==1" class="index_main_commConfrim">
							消费者每笔订单限租件数最高为50件。
						</span>
				</div>
				<!-- 租赁周期 -->
				<h3 v-show="dataType==0&&dateShow || dataType==1" class="index_main_settingTitle">租赁周期：</h3>
				<div v-show="dataType==0&&dateShow || dataType==1" class="index_mian_dateBox">
					<ul class="index_main_dateList">
						<!-- 租赁周期渲染 -->
						<!-- 显示有两种情况 1.编辑状态 2.预览状态当前item被选中 -->
						<li v-show="dataType==1 || (dataType==0&&item.click==1)" @click="dataClick(item)" v-for="item in dateList" :class="{'index_main_dateSingle--click':item.click==1}" class="index_main_dateSingle">{{item.name}}</li>
					</ul>
					<!-- 由于当前dom结构书写错误，只能采取比较二的渲染方式，后期有时间进行结构重构 -->
					<!-- 除去单位为天的列表，其余所有默认设置均为 1 无限期 5 12 100 单位天最小租赁周期默认设置为5天 -->
					<ul class="index_main_dateEdit">
						<!-- 最小租用周期单位均为大于0的正整数 -->
						<li class="index_main_dateEditBox">
							<h3 :data-msg="dateInfo[0]">最小租用周期</h3>
							<div v-for="item,index in 5" v-show="dateList[index].click==1" class="index_main_dateEditSingle">
								<input type="number" min="0" v-model="dateList[index].data[0]">
								<span>{{dateMap[index]}}</span>
							</div>
						</li>
						<!-- 最大租用周期不得小于最小租用周期 -->
						<li class="index_main_dateEditBox">
							<h3 :data-msg="dateInfo[1]">最大租用周期</h3>
							<template v-for="item,index in 5">
								<div v-show="dateList[index].click==1&&dateList[index].data[1]==-1" class="index_main_dateMax">
										<div>无限期</div>
										<button v-show="dataType==1" @click="dataMin(dateList[index].data,1)" type="button">点击取消</button>
								</div>
								<div v-show="dateList[index].click==1&&dateList[index].data[1]!=-1" class="index_main_dateEditSingle">
									<input type="number" min="0"  v-model="dateList[index].data[1]">
									<span>{{dateMap[index]}}</span>
									<span v-show="dataType==1" @click="dataMax(dateList[index].data,1)">无限期</span>
								</div>
							</template>
						</li>
						<!-- 最少提前的单位全部为天，最少提前不得大于最多提前 -->
						<li class="index_main_dateEditBox">
							<h3 :data-msg="dateInfo[2]">最少提前</h3>
							<div  v-for="item,index in 5" v-show="dateList[index].click==1" class="index_main_dateEditSingle">
								<input type="number" min="0"  v-model="dateList[index].data[2]">
								<span>日</span>
							</div>
						</li>
						<!-- 最多提前单位全部为月，最多提前不得小于最小提前 -->
						<li class="index_main_dateEditBox">
							<h3 :data-msg="dateInfo[3]">最多提前</h3>
							<div v-for="item,index in 5" v-show="dateList[index].click==1" class="index_main_dateEditSingle">
								<select v-model="dateList[index].data[3]">
									<option v-for="ite,inde in 12" :value="inde+1">{{inde+1}}个月</option>
								</select>
							</div>
						</li>
						<!-- 续租折扣为0-100的正整数 -->
						<li class="index_main_dateEditBox">
							<h3 :data-msg="dateInfo[4]">续期折扣</h3>
							<div  v-for="item,index in 5" v-show="dateList[index].click==1" class="index_main_dateEditSingle">
								<input type="number" min="0" max="100" @blur="percent(dateList[index].data)" v-model="dateList[index].data[4]">
								<span>%</span>
							</div>
						</li>
					</ul>
				</div>
				<!-- 运费模板 -->
				<!-- 模板下的三类运费模板都需要进行判断是否显示 -->
				<h3 v-show="dataType==0&&freightShow || dataType==1" class="index_main_settingTitle">运费模板：</h3>
				<div v-show="dataType==0&&freightShow || dataType==1" class="index_main_freightBox">
					<span v-show="dataType==1" class="index_main_commConfrim">
							（至少选择一种模板）
					</span>
					<div class="index_main_freightInner">
						<!-- 所有模板类型操作在预览状态下隐藏新建和刷新按钮 -->
						<div v-show="dataType==0&&data.express_model_id!=-1 || dataType==1" class="index_main_freightSingle">
							<h4>快递模板</h4>
						<!-- 所有selected类型操作元素均设置最大可见元素高度为10行，超出overFlow：auto -->
							<select v-model="data.express_model_id">
								<option selected value="-1">请选择快递模板</option>
								<option v-for="item in freight"  :value="item.freight_id">{{item.freight_name}}</option>
							</select>
							<button v-show="dataType!=0" @click="getFreight" type="button">刷新</button>
							<a target="view_window" v-show="dataType!=0" href="/merchant/freight/add">新建快递运费模板</a>
							<span v-show="dataType==1" class="index_main_commConfrim">
									不选视为商品不可快递
							</span>
						</div>
						<div v-show="dataType==0&&data.todoor_model_id!=-1|| dataType==1" class="index_main_freightSingle">
							<h4>上门模板</h4>
							<select v-model="data.todoor_model_id">
								<option selected value="-1">请选择上门模板</option>
								<option v-for="item in freight_door"  :value="item.freight_id">{{item.freight_name}}</option>
							</select>
							<button v-show="dataType!=0" @click="getFreightDoor" type="button">刷新</button>
							<a target="view_window" v-show="dataType!=0" href="/merchant/freight/homeservice">新建上门运费模板</a>
							<span v-show="dataType==1" class="index_main_commConfrim">
									不选视为商品不可上门服务
							</span>
						</div>
						<div v-show="dataType==0&&data.since_sites.length>0 || dataType==1" class="index_main_personBox">
							<div class="main_person_title" >
								<h4>自提模板</h4>
								<a @click="getFreightPerson" v-show="dataType!=0" href="javascript:void(0);">刷新</a>
								<a target="view_window" v-show="dataType!=0" href="/merchant/since/add.html">新建自提运费模板</a>
								<span v-show="dataType==1" class="index_main_commConfrim">
									不选视为商品不可上门服务
								</span>
							</div>
							<!-- 所有table选择类型只显示被选中的tr行 -->
							<div class="main_person_tableBox" >
								<table class="main_person_table">
									<tr>
										<th>门店名称</th>
										<th>门店地址</th>
										<th v-show="dataType!=0" @click="allCheck(0)">
											<input class="checkAlls" type="checkbox" v-model="allChecks" value="since">全选
										</th>
									</tr>
									<tr v-show="dataType!=0 ||(dataType==0 && JSON.stringify(data.since_sites).indexOf(item.since_id)>-1)" v-for="item,index in freight_person">
										<td>{{item.since_name}}</td>
										<td>{{item.since_detailed_address}}</td>
										<td v-show="dataType!=0" class="checkall">
											<input v-model="data.since_sites" :value="item.since_id" type="checkbox">
										</td>
									</tr>
								</table>	
							</div>
						</div>
					</div>

				</div>
				<!-- 归还地址 -->
				<h3 v-show="dataType==0&&data.return_addrs.length>0 || dataType==1" class="index_main_settingTitle">归还地址：</h3>
				<div v-show="dataType==0&&data.return_addrs.length>0 || dataType==1" class="index_main_sinceBox">
					<div class="index_since_title">
						<a v-show="dataType!=0" @click="getSince" href="javascript:void(0);">刷新</a>
						<a v-show="dataType!=0" target="view_window" href="/merchant/revert/add">添加归还地址</a>
					</div>
					<div class="index_main_sinceTableBox">
						<div class="index_main_sinceTableInner">
							<table class="index_main_sinceTable">
								<tr>
									<th>姓名</th>
									<th>收货地址</th>
									<th v-show="dataType!=0" @click="allCheck(1)">
										<input class="checkAll" type="checkbox" v-model="allChecks" value="return">全选
									</th>
								</tr>
								<tr v-show="dataType!=0 ||(dataType==0 && JSON.stringify(data.return_addrs).indexOf(item.revert_id)>-1)" v-for="item in sinceList">
									<td>{{item.revert_name}}</td>
									<td>{{item.revent_address}}</td>
									<td v-show="dataType!=0"><input type="checkbox" v-model="data.return_addrs" :value="item.revert_id"></td>
								</tr>
							</table>
						</div>
					</div>
				</div>
			</div>
			<div class="index_main_btnList">
				<!--首次设置完成后再次设置需要点击修改按钮进行修改,点击修改后按键立马变化为保存和取消按钮，此时所有表单变为可编辑状态 -->
				<!--所有表单添加readonly或者disabled过于繁琐，直接使用微元素：after遮盖整个可操作区域，让其无法操作 -->
				<!-- 修改按钮显示情况只有一种 当前模式处于预览模式 dataType：0  firstSetting：0-->
				<button @click="startChange" v-show="dataType==0&&firstSetting!=1" class="index_main_change" type="button">修改</button>
				<!-- 初次进入用户出现设置功能，点击开始设置进入设置页面 -->
				<!-- 开始设置显示只有一种情况 初次进入且当前不为编辑模式  firstSetting：1 dataType：0 -->
				<button @click="showSetting" v-show="firstSetting==1&&dataType!=1" class="index_main_change" type="button">开始设置</button>
				<!-- 保存和取消位于同一水平线，保存后已有设置生效 -->
				<!-- 无任何操作下的保存应不生效,但是由于默认显示出日月周年的日期初始数据，所以仍然让其提交数据，但是无任何数据的情况下应该不提交 -->
				<button @click="saveData" v-show="dataType==1" class="index_main_change" type="button">保存</button>
				<!-- 取消按钮显示情况只有一种 处于编辑状态下 dataType：1 -->
				<button @click="cancelSetting" v-show="dataType==1" class="index_main_change" type="button">取消</button>
			</div>
			<?php } ?>
		</div>
	</div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script type="text/javascript" src="__MERCHANT_STATIC__/style/js/index/index.js?v=2018.02.26"></script>
